/*
 * @Author: your name
 * @Date: 2021-04-23 23:32:50
 * @LastEditTime: 2021-04-24 07:25:51
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \offer20k\项目代码\fantasticit\src\pages\detail\index.tsx
 */
import React, { useEffect } from 'react'
import { useHistory } from 'umi'
import useStore from '@/context/useStore'
import { observer } from "mobx-react-lite"
import styles from './detail.less'
import Airticlelist from '../../components/Airticlelist'
import Editor from 'for-editor'
import ViewerImage from '@/components/viewerImage'
import Highlight from '@/components/highlight'


const Detail: React.FC = () => {
    let { article } = useStore()
    const history = useHistory()

    useEffect(() => {
        article.getAirticleDetail((history.location.state as string))
    }, [history.location.state])
    console.log(article.articleDetail.toc);

    const toolbar = {}
    return (
        <div className={styles.main}>
            <div className={styles.allcontainer}>
                {/* 左侧 */}
                <div className={styles.mainleft}>
                    <div>
                        <img src={article.articleDetail.cover} alt="" />
                        <h1>{article.articleDetail.title}</h1>
                        <p><span>发布于</span>{article.articleDetail.publishAt} · <span>阅读量</span> {article.articleDetail.views}</p>
                       
                            <Highlight str={(article.articleDetail.html as string)} />
                        
                    </div>
                </div>
                {/* 右侧 */}
                <div className={styles.mainright}>
                    <div className={styles.sticky} >
                        <Airticlelist />
                        {
                            article.articleDetail.toc ?
                                <div className={styles.menu} >
                                    <p>目录</p>
                                    {
                                        <ul>
                                            {
                                                JSON.parse(article.articleDetail.toc as string).map((item: any) => {
                                                    return <li key={item.id}>{item.text}</li>
                                                })
                                            }
                                        </ul>
                                    }
                                </div> : null
                        }
                    </div>
                </div>

            </div>
        </div>
    )
}
export default observer(Detail);
